<script lang="ts">
  import { Motion, AnimatePresence, useAnimation } from "svelte-motion";
  import { inview } from "svelte-inview";
  import { cn } from "$lib/utils";
  export let duration = 0.4;
  export let delay = 0;
  export let yOffset = 6;
  export let inViewMargin = "-50px";
  export let blur = "6px";
  export let id = crypto.randomUUID().slice(0, 8);
  export let once = false;
  let defaultVariants = {
    hidden: { opacity: 0, y: yOffset, filter: `blur(${blur})` },
    visible: { opacity: 1, y: 0, filter: `blur(0px)` },
  };
  let isInView = "hidden";

  let className = "";
  export { className as class };
</script>

<AnimatePresence let:item list={[{ key: id }]}>
  <Motion
    initial="hidden"
    animate={isInView}
    exit="hidden"
    variants={defaultVariants}
    transition={{
      delay: 0.04 + delay,
      duration,
      ease: "easeOut",
    }}
    let:motion
  >
    <div
      use:inview={{ rootMargin: inViewMargin, unobserveOnEnter: once }}
      use:motion
      on:inview_change={({ detail }) => {
        isInView = detail.inView ? "visible" : "hidden";
      }}
      class={cn(className)}
    >
      <slot>Default</slot>
    </div>
  </Motion>
</AnimatePresence>
